<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page isELIgnored ="false" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>

<%
    response.setHeader("Cache-Control", "no-store"); //HTTP 1.1    
    response.setHeader("Pragma", "no-cache"); //HTTP 1.0    
    response.setDateHeader("Expires", 0); //prevents caching at the proxy server    
%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Order List</title>
        <link rel="stylesheet" href="${applicationScope.webApp.root}/css/jquery.mobile.min.css" /> 
        <script src="${applicationScope.webApp.root}/js/jquery.min.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.mobile.min.js"></script> 
        <style>
            body {
                background-color: rgb(221,221,221);
            }
        </style>
        <script>
            /*
            function editOrder(orderId, obj){
                obj.value="aaa";     
                alert(obj.value);
                alert(obj.val());
                alert(obj.attr("value"));
                alert("完成" == obj.val());
                if("完成" == obj.val()){
                    obj.val('编辑');
                    $('[name|="courseEdit'+orderId+ '"]').css('display','none');
                } else {
                    obj.val('完成');
                    $('[name|="courseEdit'+orderId+ '"]').css('display','block');
                }
                return true;
            }
            /*
            function test(obj){
                
     
                for(i in obj){
                    if(obj[i]=="编辑"){
                       alert(i);
                       }
                       }
                
            }*/
            $(document).ready(function() {
                //初始化，隐藏所有Done按钮
                $('a[command="orderDone"]').css('display','none');
                //编辑按钮的click响应
                $('a[command="orderEdit"]').click(function() {
                    var orderId = $(this).attr("orderId");
                    //隐藏编辑按钮
                    $(this).hide();
                    //显示完成按钮
                    $('a[command="orderDone"][orderId="'+orderId+'"]').show();
                    //显示菜品编辑按钮
                    //$('div[command="courseEdit"][orderId="'+orderId+'"]').show();
                    return true;
                });
                //完成按钮的click响应
                $('a[command="orderDone"]').click(function() {
                    var orderId = $(this).attr("orderId");
                    //隐藏完成按钮
                    $(this).hide();
                    //显示编辑按钮
                    $('a[command="orderEdit"][orderId="'+orderId+'"]').show();
                    //隐藏菜品编辑按钮
                    $('div[command="courseEdit"][orderId="'+orderId+'"]').hide();
                    //完成后，重新加载当前页面
                    //alert(window.location);
                    //window.location = "${applicationScope.webApp.root}/mobile?command=orderList";
                    return true;
                });
                //重复菜品按钮的click响应
                $('a[command="doubleCourse"]').click(function() {
                    var command = $(this).attr("command");
                    var orderId = $(this).attr("orderId");
                    var courseId = $(this).attr("courseId");
                    var courseIndex = $(this).attr("courseIndex");
                    var coursePrice = parseInt($(this).attr("coursePrice"));
                    $.ajax({
                       type: "GET",
                       url: "${applicationScope.webApp.root}/mobile",
                       data: "command="+command+"&orderId="+orderId+"&courseId="+courseId,
                       success: function(msg){
                         //alert( "Data Saved: msg.success=" + msg.success );
                         var liObj = $('li[courseIndex="'+courseIndex+'"]');
                         //alert(liObj.length);
                         if(liObj.length>1) liObj = $(liObj[0]);
                         var newLiObj = liObj.clone();
                         newLiObj.find('div[command="courseEdit"]').hide();//将clone出来的菜品，编辑按钮隐藏，因为clone出来的没有注册click响应，也便于显示上有所区别
                         liObj.after(newLiObj);
                         //修改总价
                         var amount = parseInt($('#amount'+orderId)[0].innerHTML);
                         $('#amount'+orderId)[0].innerHTML = amount + coursePrice;
                       }
                    });
                });
                //删减菜品按钮的click响应
                $('a[command="deleteCourse"]').click(function() {
                     var orderId = $(this).attr("orderId");
                     var courseId = $(this).attr("courseId");
                   $.ajax({
                       type: "GET",
                       url: "${applicationScope.webApp.root}/mobile",
                       data: "command="+command+"&orderId="+orderId+"&courseId="+courseId,
                       success: function(msg){
                       }
                    });
                });
            }); 
        </script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-role="content">
                <div class="content-primary">	
                    <ul data-role="listview" data-inset="true" data-split-icon="gear" data-split-theme="d"> 
                        <!--<li data-role="list-divider">待接受点单</li>-->
                        <c:if test="${requestScope.newListSize < 1}">
                            <li data-theme="e">没有已经提交的点单.</li>
                        </c:if>
                        <ul data-role="listview" data-inset="true" data-split-icon="gear" data-split-theme="d"> 
                            <c:forEach items="${requestScope.newList}" var="order">
                                <li data-theme="e">
                                    <div data-role="controlgroup" data-type="horizontal">
                                    &nbsp;&nbsp;&nbsp;&nbsp;${order.ymd}
                                    &nbsp;&nbsp;&nbsp;&nbsp;${order.storeName}
                                    &nbsp;&nbsp;&nbsp;&nbsp;合计<span id="amount${order.id}">${order.amount}</span>元
                                    <a command="orderCancel" href="${applicationScope.webApp.root}/mobile?command=cancelOrder&orderId=${order.id}" data-transition="none" data-role="button" data-theme="e" data-icon="delete"  style="position:absolute; top: 10px; right: 20px; font-size: 15px;">删除</a>
                                    </div>
                                </li> 
                                
                                <c:forEach items="${order.orderItemsCollection}" var="orderItem" varStatus="status">
                                    <li data-theme="d" courseIndex="${status.index}"> 
                                        <h3 style="font-size: 30px">${orderItem.courseName}</h3>
                                        <div style="position:absolute; top: 26px; right: 220px; font-size: 30px"><strong>￥${orderItem.coursePrice}</strong></div>
                                        <div command="courseEdit" orderId="${order.id}" style="display:none; position:absolute; top: 19px; right: 10px;" data-role="controlgroup" data-type="horizontal"> 
                                            <a command="doubleCourse" orderId="${order.id}" courseId="${orderItem.courseId}" courseIndex="${status.index}" coursePrice="${orderItem.coursePrice}" href="#" data-role="button" data-theme="e" data-icon="plus">增加</a>
                                            <a command="deleteCourse" orderId="${order.id}" courseId="${orderItem.courseId}" courseIndex="${status.index}" coursePrice="${orderItem.coursePrice}" href="#" data-role="button" data-theme="e" data-icon="minus">删除</a>
                                        </div> 
                                    </li> 
                                </c:forEach>
                            </c:forEach>
                        </ul>
                    </ul> 
                </div><!--/content-primary -->
            </div><!-- /content -->
        </div><!-- /page --> 
    </body>
</html>
